<template>
  <div class="book-list">
    <h2>"{{ tag }}"</h2>
    <template>
      <div>
        <book-card :books="filteredBooks"></book-card>
      </div>
    </template>
  </div>
</template>

<script>
import { books } from "@/assets/data/booksData";
import BookCard from '@/components/Bookcard.vue';
export default {
  components: {
    BookCard
  },
  name: 'BookList',
  props: ['tag'],
  data() {
    return {
      bookList: books
    };
  },
  computed: {
    filteredBooks() {
      return books.filter(book => book.tags.includes(this.tag));
    },
  },
};
</script>
